<template>
	<view class="">
		<view class="c-foot" :class="[ggclass,{'box-shadow':isBoxShadows}]" :style="[styles]">

			<slot :slotData="slotData"></slot>
		</view>
		<view class="foot-box" :style="{height}">
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import propsMixin from '../mixins/props/index.js'
	export default {
		mixins: [propsMixin],
		name: "c-foot",
		props: {
			padding: {
				type: String,
				default: ''
			},
			isBoxShadow: {
				type: [String, Boolean],
				default: ''
			},
			background: {
				type: String,
				default: ''
			},
			jc: {
				type: String,
				default: ''
			},
			row: {
				type: Boolean,
				default: false
			},
			extendHieght: {
				type: String,
				default: '20rpx'
			},
			slotData: {
				type: [String, Object],
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				info: {
					safeAreaInsets: {}
				},
				paddingBottomHeight: '',
				height: '',
			}
		},
		async mounted() {
			this.info = this.$store?.state?.systemInfo || uni.getSystemInfoSync()
			let res = await this.$getNode('.c-foot', this)
			this.height = res.height * 2 + parseInt(this.extendHieght) + 'rpx'
		},
		methods: {},
		computed: {
			extendHieghts() {
				return this.extendHieght === '20rpx' ? (this.$footStyle || {}).extendHieght || this.extendHieght : this
					.extendHieght
			},
			paddingBottoms: {
				get() {
					if (this.paddingBottomHeight)
						return `${this.paddingBottomHeight + parseInt(this.extendHieghts) + 20}rpx`
					if (this.info.safeAreaInsets.bottom) {
						return `${this.info.safeAreaInsets.bottom}rpx`
					}
					return `${parseInt(this.extendHieghts)}rpx`
				},
				set(val) {
					this.paddingBottomHeight = val
				}

			},
			paddings() {
				return this.padding || (this.$footStyle || {}).padding
			},
			jcs() {
				return this.jc || (this.$footStyle || {}).jc
			},
			computedFootBackgroung() {
				if (this.isOpenPattern) {
					return this.$color.theme.footBgColor
				}
				return this.background || this.$footStyle.background || '#fff'

			},
			isBoxShadows() {
				if (this.isBoxShadow !== '') return this.isBoxShadow
				return this.$footStyle.isBoxShadow
			},
			styles() {
				let params = {
					background: this.computedFootBackgroung,
					padding: this.paddings,
					justifyContent: this.jcs,
					paddingBottom: this.paddingBottoms,
					color: this.computedColor,
				}
				if(this.row){
					params.display = 'flex'
				}
				return params
			}
		},
	};
</script>

<style lang="less" scoped>
	.c-foot {
		overflow: hidden;
		// height: 80rpx;
		width: 100%;
		position: fixed;
		background-color: #fff;
		bottom: 0;
		left: 0;
		z-index: 99;
		// box-sizing: content-box;
		// padding-top: 20rpx;
		// padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

	}

	.box-shadow {
		box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 15, 65, 0.1);
	}
</style>